<template>
	<view>
		<image class="bg" src="/static/images/bg-login.png" mode="aspectFill"></image>
		<view class="content">
			<view class="title">欢迎登陆</view>
			<view class="card">
				<view class="font">
					<view class="item u-f-ac">
						<image
							class="icon1"
							src="/static/images/icon-person.png"
							mode="aspectFill"
						></image>
						<input
							class="input"
							type="text"
							v-model="username"
							placeholder="输入登录账号"
							placeholder-class="pla-class"
						/>
					</view>
					<view class="item u-f-ac">
						<image
							class="icon2"
							src="../../static/images/icon-suo.png"
							mode="aspectFill"
						></image>
						<input
							class="input"
							type="text"
							password
							v-model="password"
							placeholder="输入登录密码"
							placeholder-class="pla-class"
						/>
					</view>
					<view class="checkbox-wrap">
						<checkbox-group @change="checkboxChange">
							<label>
								<checkbox
									value="1"
									:checked="isSaveCode"
									color="#ffc802"
									@change="checkboxChange"
								/>
								记住密码
							</label>
						</checkbox-group>
					</view>
					<button
						v-show="bntIsActive && canIUseGetUserProfile"
						class="btn u-f-ajc active"
						@tap="login"
					>
						登录
					</button>
					<button
						v-show="bntIsActive && !canIUseGetUserProfile"
						class="btn u-f-ajc active"
						open-type="getUserInfo"
						@getuserinfo="login"
					>
						登录
					</button>
					<button v-show="!bntIsActive" class="btn u-f-ajc" type="default">登录</button>
					<image
						class="form-bg"
						src="/static/images/bg-login2.png"
						mode="aspectFill"
					></image>
					<div
						v-if="!isShowDev" 
						class="radio-wrap"
						style="height: 100rpx;width: 100%;"
						@tap="fastclick"
					></div>
					<radio-group v-else @change="radioChangeHandle" class="radio-wrap">
						<label>
							<radio value="http://192.168.1.34:9666" />
							<text>http://192.168.1.34:9666</text>
						</label>
						<label>
							<radio value="https://api.etubang.com" />
							<text>https://api.etubang.com</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			isSaveCode: false,
			isShowDev: false,
			tapTimes: 0,
			isSharer: false,
			canIUseGetUserProfile: false // 当前版本库是否可以使用getUserProfile 获取用户信息
		};
	},
	computed: {
		bntIsActive() {
			return this.username !== '' && this.password !== '';
		}
	},
	onLoad() {
		const lastloginInfo = uni.getStorageSync('lastloginInfo');
		if (lastloginInfo) {
			this.username = lastloginInfo.username;
			this.password = lastloginInfo.password;
			this.isSaveCode = true;
		}
		this.lastTime = new Date().getTime();
		if (wx.getUserProfile) {
			this.canIUseGetUserProfile = true;
		}
	},
	onShow() {
		this.getCode();
	},
	methods: {
		toggle() {
			this.isSharer = !this.isSharer;
		},
		fastclick() {
			// 连续点击5次以上 显示开发调试环境
			var currentTime = new Date().getTime();
			// 计算两次相连的点击时间间隔
			this.tapTimes = currentTime - this.lastTime < 300 ? this.tapTimes + 1 : 1;
			this.lastTime = new Date().getTime();
			clearTimeout(this.timer);
			if (this.tapTimes > 4) {
				// 连续点击五次或者五次以上的点击事件
				this.isShowDev = true;
			}
			this.timer = setTimeout(() => {
				// 处理点击事件
				console.log(this.tapTimes);
				this.tapTimes = 0;
			}, 300 + 10);
		},
		radioChangeHandle(e) {
			this.$u.http.setConfig({
				baseUrl: e.detail.value
			});
		},
		checkboxChange(e) {
			console.log(e);
			if (e.detail.value.length > 0) {
				this.isSaveCode = true;
			} else {
				this.isSaveCode = false;
			}
		},
		async login(e) {
			console.log(e);
			let event = e;
			if (this.lock) return;
			if (this.canIUseGetUserProfile) {
				event = await this.getUserInfo();
				var { encryptedData, iv, userInfo } = event;
			} else {
				var { encryptedData, iv, userInfo } = event.detail;
			}
			const { username, password, code } = this;
			if (username == '' || password == '') {
				return uni.showToast({
					title: '请输入账号和密码',
					icon: 'none'
				});
			}
			this.lock = true;
			uni.showLoading();
			this.$u.api
				._login({ userCode: username, userPwd: password, encryptedData, iv, code })
				.then(res => {
					this.lock = false;
					uni.setStorageSync('token', res.token);
					res.avatarUrl = userInfo.avatarUrl;
					res.nickName = userInfo.nickName;
					this.$store.commit('setUserinfo', res);
					// 是否记住密码
					if (this.isSaveCode) {
						uni.setStorageSync('lastloginInfo', { username, password });
					} else {
						uni.removeStorageSync('lastloginInfo');
					}
					uni.showToast({
						title: '登录成功'
					});
					setTimeout(() => {
						if (res.isMain == 2) {
							// 推广员登录
							uni.reLaunch({
								url: '/pages/promotionActivity/promotionActivity'
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 888);
				})
				.catch(() => {
					this.lock = false;
				});
			this.getCode();
		},
		getCode() {
			uni.login({
				success: res => {
					this.code = res.code;
				}
			});
		},
		getUserInfo() {
			return new Promise((resolve, reject) => {
				if (wx.getUserProfile) {
					wx.getUserProfile({
						desc: '用于完善会员资料',
						success: res => {
							console.log(res);
							resolve(res);
						},
						fail: err => {
							console.log(err);
							reject(err);
						}
					});
				} else {
					resolve();
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: rgba(249, 249, 249, 1);
}
.bg {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.title {
	font-size: 48rpx;
	margin-top: 210rpx;
	margin-left: 75rpx;
}
.content {
	position: absolute;
	perspective: 2000px;
}
.card {
	position: absolute;
	top: 320rpx;
	left: calc((100vw - 690rpx) / 2);
	width: 690rpx;
	height: 66vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0rpx 0rpx 1rpx 2rpx #eee;
	border-radius: 20rpx;
	transition: transform 0.8s;
	transform-style: preserve-3d;

	&.s1 {
		transform: rotateY(180deg);
	}
}

.font {
	background-color: #ffffff;
	position: absolute;
	width: 690rpx;
	height: 66vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0rpx 0rpx 1rpx 2rpx #eee;
	border-radius: 20rpx;
	backface-visibility: hidden;
	padding-top: 100rpx;

	.role {
		font-weight: 800;
		padding: 60rpx 0;
		font-size: 34rpx;
	}

	.btn-switch {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		color: #999999;
		text-decoration: underline;

		> image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.item {
		width: 600rpx;
		height: 84rpx;
		border-radius: 40rpx;
		background-color: #f0f0f0;
		margin-bottom: 30rpx;
		padding: 0 40rpx;
	}
	.icon1 {
		width: 30rpx;
		height: 33rpx;
	}

	.icon2 {
		width: 30rpx;
		height: 40rpx;
	}

	.btn {
		margin-top: 120rpx;
		color: rgba(95, 101, 112, 1);
		width: 600rpx;
		border-radius: 44rpx;
		&.active {
			background-color: rgba(255, 206, 0, 1);
			color: rgba(36, 47, 68, 1);
		}
	}
	.form-bg {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 530rpx;
		height: 200rpx;
	}

	.input {
		flex: 1;
		margin: 0 20rpx;
		text-align: center;
		line-height: 84rpx;
		margin-left: -20rpx;
	}

	.checkbox-wrap {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-right: 100rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #666;
	}
}

.pla-class {
	font-size: 28rpx;
	color: rgba(153, 153, 153, 1);
}

.radio-wrap {
	display: flex;
	flex-direction: column;
	margin-top: 30rpx;
	z-index: 9999;
	> label {
		margin-bottom: 20rpx;
	}
}
</style>
